var PageSelectArray = new Array("assets/Pic/Page_create_pic/Page/paper001.jpg","assets/Pic/Page_create_pic/Page/paper002.jpg","assets/Pic/Page_create_pic/Page/paper003.jpg","assets/Pic/Page_create_pic/Page/paper004.jpg",
"assets/Pic/Page_create_pic/Page/paper005.jpg","assets/Pic/Page_create_pic/Page/paper006.jpg","assets/Pic/Page_create_pic/Page/paper007.jpg","assets/Pic/Page_create_pic/Page/paper008.jpg","assets/Pic/Page_create_pic/Page/paper009.jpg",
"assets/Pic/Page_create_pic/Page/paper010.jpg","assets/Pic/Page_create_pic/Page/paper011.jpg","assets/Pic/Page_create_pic/Page/PageTexture0.jpg","assets/Pic/Page_create_pic/Page/PageTexture1.jpg","assets/Pic/Page_create_pic/Page/PageTexture2.jpg",
"assets/Pic/Page_create_pic/Page/PageTexture3.jpg","assets/Pic/Page_create_pic/Page/PageTexture4.jpg","assets/Pic/Page_create_pic/Page/PageTexture5.png"
,"assets/Pic/Page_create_pic/Page/PageTexture6.png");

var PageDescArray = new Array("Page1","Page2","Page3","Page4",
"Page5","Page6","Page7","Page8","Page9"
,"Page10","Page11","Page12","Page13"
,"Page14","Page15","Page16");

var BinderArray = new Array("assets/Pic/Page_create_pic/Binder/parchmentring.gif","assets/Pic/Page_create_pic/Binder/Binder1.jpg","assets/Pic/Page_create_pic/Binder/Binder2.jpg","assets/Pic/Page_create_pic/Binder/greenBinder.jpg","assets/Pic/Page_create_pic/Binder/parchmentring.gif"
,"assets/Pic/Page_create_pic/Binder/Binder1.jpg","assets/Pic/Page_create_pic/Binder/Binder1.jpg","assets/Pic/Page_create_pic/Binder/Binder1.jpg");

var BackgroundArray = new Array("assets/Pic/Page_create_pic/Background/BookBg.jpg","assets/Pic/Page_create_pic/Background/green_background.jpg","assets/Pic/Page_create_pic/Background/brown_background.jpg","assets/Pic/Page_create_pic/Background/sea_background.jpg","assets/Pic/Page_create_pic/Background/picart_background.jpg"
,"assets/Pic/Page_create_pic/Background/flower_background.jpg","assets/Pic/Page_create_pic/Background/leaf_background.jpg","assets/Pic/Page_create_pic/Background/red_background.jpg");

var CurrentIndex = 0;
var SelectorMode =0; // 0 = bookpage  1 = binder 2 = background

var SelectBookText = "assets/Pic/Page_create_pic/Page/PageTexture0.jpg";
var SelectBinderText = "assets/Pic/Page_create_pic/Binder/parchmentring.gif";
var SelectBgText = "assets/Pic/Page_create_pic/Background/green_background.jpg";

function SaveCreateData()
{
	var Temp_txt = document.getElementById("ctl0_Main_Temp_data");
	Temp_txt.value = SelectBookText+","+SelectBinderText+","+SelectBgText;
}
function getCreateBookResult()
{
	alert(SelectBookText+","+SelectBinderText+","+SelectBgText);
}	
function ShowPage(Selector)
{
	if(parseInt(SelectorMode)==0)
	{
	var pageSelectorLeft = document.getElementById("CurrentPageChooseLeft");
	var pageSelectorRight = document.getElementById("CurrentPageChooseRight");
	pageSelectorLeft.setAttribute("src",PageSelectArray[Selector]); 
	pageSelectorRight.setAttribute("src",PageSelectArray[Selector]); 
	
	SelectBookText = PageSelectArray[Selector];
	}
	else if(parseInt(SelectorMode)==1)
	{
	var PageBinder = document.getElementById("PageBinderImage");
	PageBinder.style.background = "transparent url('"+BinderArray[Selector]+"') top left repeat-y";
	SelectBinderText = BinderArray[Selector];
	}
	else//2
	{
	var BookBackground = document.getElementById("BackgroundImage");
	BookBackground.setAttribute("src",BackgroundArray[Selector]); 
	SelectBgText = BackgroundArray[Selector];
	}
	SaveCreateData();
}

function MoveNext()
{	
	if(parseInt(SelectorMode)==0)
	{	
	
		if(CurrentIndex+6<PageSelectArray.length)
		{
			CurrentIndex++;
			SetPageSelector();
		}
	}
	else if(parseInt(SelectorMode)==1)
	{
		if(CurrentIndex+6<BinderArray.length)
		{
			CurrentIndex++;
			SetPageSelector();
		}
	}
	else//2
	{
		if(CurrentIndex+6<BackgroundArray.length)
		{
			CurrentIndex++;
			SetPageSelector();
		}
	}

}

function MovePrevious()
{
	if(CurrentIndex>0)
	{
		CurrentIndex--;
		SetPageSelector();
	}
}

function SwaptoBookPage()
{
	if(parseInt(SelectorMode) !=0)
	{
		SelectorMode = 0;
		CurrentIndex = 0;
		SetTabColorBackground();
		SetPageSelector();
	}
}
function SwaptoBinder()
{
	if(parseInt(SelectorMode) !=1)
	{	
		SelectorMode = 1;
		CurrentIndex = 0;
		SetTabColorBackground();
		SetPageSelector();
	}
}
function SwaptoBackground()
{
	if(parseInt(SelectorMode) !=2)
	{	
		SelectorMode = 2;
		CurrentIndex = 0;
		SetTabColorBackground();
		SetPageSelector();
	}

}

function SetTabColorBackground()
{
	var PageTab = document.getElementById("BookPageSelectTab");
	var BinderTab = document.getElementById("BinderSelectTab");
	var BackgroundTab = document.getElementById("BackgroundSelectTab");
	PageTab.style.font ="18px Serif";
	BinderTab.style.font ="18px Serif";
	BackgroundTab.style.font ="18px Serif";
	
	if(parseInt(SelectorMode)==0)
	{
		PageTab.style.font ="bold 18px Serif";
	
	}
	else if(parseInt(SelectorMode)==1)
	{
		BinderTab.style.font ="bold 18px Serif";
	}
	else if(parseInt(SelectorMode)==2)
	{
		BackgroundTab.style.font ="bold 18px Serif";
	}
	
}


function InitTabSelect()
{
	var PageTab = document.getElementById("BookPageSelectTab");
	//PageTab.setAttribute("OnClick","SwaptoBookPage();"); 
	PageTab.onclick = function(){SwaptoBookPage();};
	var BinderTab = document.getElementById("BinderSelectTab");
	//BinderTab.setAttribute("OnClick","SwaptoBinder();"); 
	BinderTab.onclick = function(){SwaptoBinder();};
	var BackgroundTab = document.getElementById("BackgroundSelectTab");
	//BackgroundTab.setAttribute("OnClick","SwaptoBackground();"); 
	BackgroundTab.onclick = function(){SwaptoBackground();};
}
function InitBookImage()
{
	var pageSelectorLeft = document.getElementById("CurrentPageChooseLeft");
	var pageSelectorRight = document.getElementById("CurrentPageChooseRight");
	pageSelectorLeft.setAttribute("src",PageSelectArray[0]); 
	pageSelectorRight.setAttribute("src",PageSelectArray[0]); 
	
	var PageBinder = document.getElementById("PageBinderImage");
	PageBinder.style.background = "transparent url('"+BinderArray[0]+"') top left repeat-y";
	
	var BookBackground = document.getElementById("BackgroundImage");
	BookBackground.setAttribute("src",BackgroundArray[0]); 
}

function Init()
{
     SetPageSelector();
	 InitTabSelect();
	 SetTabColorBackground();
	 InitBookImage();
	 SaveCreateData();
}

function SetPageSelector()
{	
	var CurrentArray;
	if(parseInt(SelectorMode)==0)
	{
		CurrentArray = PageSelectArray;
	}
	else if(parseInt(SelectorMode)==1)
	{	
		CurrentArray = BinderArray;
	}
	else
	{	
		CurrentArray = BackgroundArray;
	}
	
		var pageSelector0 = document.getElementById("pageOption"+0);
		pageSelector0.setAttribute("src",CurrentArray[0+CurrentIndex]); 
		
		var pageSelector1 = document.getElementById("pageOption"+1);
		pageSelector1.setAttribute("src",CurrentArray[1+CurrentIndex]); 
		
		var pageSelector2 = document.getElementById("pageOption"+2);
		pageSelector2.setAttribute("src",CurrentArray[2+CurrentIndex]); 
		
		var pageSelector3 = document.getElementById("pageOption"+3);
		pageSelector3.setAttribute("src",CurrentArray[3+CurrentIndex]); 
		
		var pageSelector4 = document.getElementById("pageOption"+4);
		pageSelector4.setAttribute("src",CurrentArray[4+CurrentIndex]); 
		
		var pageSelector5 = document.getElementById("pageOption"+5);
		pageSelector5.setAttribute("src",CurrentArray[5+CurrentIndex]); 
		
		for(var i = 0; i < 6;i++)
		{
		var itemDesc = document.getElementById("ItemDesc"+i);
		itemDesc.innerHTML  = PageDescArray[i+CurrentIndex];
		}
		//pageSelector.setAttribute("OnClick","ShowPage('"+Index+"');"); 
		pageSelector0.onclick = function(){ShowPage(0+CurrentIndex);};
		pageSelector1.onclick = function(){ShowPage(1+CurrentIndex);};
		pageSelector2.onclick = function(){ShowPage(2+CurrentIndex);};
		pageSelector3.onclick = function(){ShowPage(3+CurrentIndex);};
		pageSelector4.onclick = function(){ShowPage(4+CurrentIndex);};
		pageSelector5.onclick = function(){ShowPage(5+CurrentIndex);};
		
		
	var LeftArrow = document.getElementById("goLeft");
	LeftArrow.setAttribute("OnClick","MovePrevious();"); 
	LeftArrow.onclick = function(){MovePrevious();};
	var RightArrow = document.getElementById("goRight");
	RightArrow.setAttribute("OnClick","MoveNext();"); 
	RightArrow.onclick = function(){MoveNext();};
}